<template>
    <div class="container user-container">
        <div class="user">
            <header>
                <router-link to="/">首页 / </router-link>
                用户管理
            </header>
            <div v-if="messageList.length > 0" class="focus-pointer mb30">
                <div class="flex-box-align" style="padding-left: 18px; position: relative; width: 100%;">
                    今日要事：
                    <div class="message">
                        <ul class="marquee_list" :style="{ top: -num + 'px'}" :class="{marquee_top:num}">
                            <li v-for="(item, index) in messageList" :key="index" v-if="messageList && messageList.length">
                                <router-link :to="{name: item.route}">{{item.showMsg}}</router-link>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="search-modal mb30">
                <div class="" style="margin-bottom: 20px">
                    <span>查询及添加</span>
                    <el-button type="primary" size="small" @click="handleClickSearch">查询</el-button>
                    <el-button type="primary" size="small" @click="handleClickAdd">添加</el-button>

                </div>
                <div class="flex-box-align">
                    <div class="search-item">
                        <div class="search-title">用户名：</div>
                        <el-input style="width: 54%;" class=""
                                  placeholder="请输入用户名"
                                  v-model="configList.param.account" ></el-input>
                    </div>
                    <div class="search-item">
                        <div class="search-title">合作伙伴类型：</div>
                        <el-select filterable  @change="userTypeChange" v-model="configList.param.userType" placeholder="请选择">
                            <el-option
                                    v-for="item in options1"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="search-item">
                        <div class="search-title">合作伙伴：</div>
                        <el-select filterable v-model="configList.param.belongUserId" placeholder="请选择">
                            <el-option
                            label="全部"
                            value="">
                            </el-option>
                            <el-option
                            v-for="item in userArr"
                            :key="item.userId"
                            :label="item.companyName"
                            :value="item.userId">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="search-item">
                        <div class="search-title">权限类型：</div>
                        <el-select filterable v-model="configList.param.roleKey" placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </div>

            <div class="">
                <table-list ref="tableList" :tableConfig='configList'>
                    <el-table-column  slot=""  align="center" label="企业名称">
                        <template slot-scope="scope">
                            <span></span>
                        </template>
                    </el-table-column>
                    <el-table-column class="btn" label="操作" slot="btn" align="center" >
                        <template slot-scope="scope">
                            <el-button @click="editShow(scope.row)" type="primary" size="small">权限编辑</el-button>
                        </template>
                    </el-table-column>
                </table-list>
            </div>
            <el-dialog center :title="titleName" :visible.sync="dialogFormVisible">
                <el-form :model="information" :rules="rules" ref="information">
                    <el-form-item  prop="nickname" label="用户名：" :label-width="formLabelWidth">
                       <el-input
                            v-model="information.nickname">
                        </el-input>
                    </el-form-item>
                    <el-form-item  prop="account" label="用户账号：" :label-width="formLabelWidth">
                       <el-input
                            v-model="information.account">
                        </el-input>
                    </el-form-item>
                    <el-form-item  prop="password" label="用户密码：" :label-width="formLabelWidth">
                       <el-input
                            v-model="information.password">
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="userType"   label="合作伙伴：" :label-width="formLabelWidth">
                        <el-select filterable @change="userTypeChange"  v-model="information.userType">
                            <el-option
                            v-for="item in options1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="belongUserId" label="合作企业：" :label-width="formLabelWidth">
                        <el-select  filterable v-model="information.belongUserId">
                            <el-option
                            v-for="item in userArr"
                            :key="item.userId"
                            :label="item.companyName"
                            :value="item.userId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="roleKey" label="伙伴权限：" :label-width="formLabelWidth">
                        <el-select  filterable v-model="information.roleKey">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitBtn('information')">提交</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import {parseUrlParams} from "../../util";
    let CONSTANT = require('../../constant/constant.js'),
        common = require('../../common.js');
    export default {
        data() {
            return {
                companyName: '',
                titleName:'添加用户',
                formLabelWidth:'150px',
                options: [{
                    value: 'admin',
                    label: '管理员'
                }, {
                    value: 'normal',
                    label: '普通员工'
                }],
                options1: [{
                    value: 'company',
                    label: '企业'
                }, {
                    value: 'bank',
                    label: '资方'
                }, {
                    value: 'channel',
                    label: '推荐机构'
                }],
                value: '',
                dialogFormVisible:false,
                configList:{
                    url:CONSTANT.URL.COMPANY.FINDUSERCOREPAGE,
                    configList:[
                        {
                            label:'用户名称',
                            prop: "nickname"
                        },
                        {
                            label:'用户账号',
                            prop: "account"
                        },
                        {
                            label:'合作伙伴',
                            prop: "userTypeDesc"
                        },
                        {
                            label:'合作企业',
                            prop: "companyName"
                        },
                        {
                            label:'合作伙伴权限',
                            prop: "roleKeyDesc"
                        },
                        {
                            label:'创建日期',
                            prop: "gmtCreated"
                        },
                        {
                            label:'添加人',
                            prop: "creatorName"
                        },
                        {
                            slot: "btn"
                        }
                    ],
                    param:{
                        account:'',
                        belongUserId:'',
                        roleKey:'',
                        userType:''
                    },
                    type:'',
                    width:'',
                    isPagination:true
                },
                rules: {
                    account:[
                        {required: true, message: '请输入用户账号', trigger: 'change'  }
                    ],
                    belongUserId: [
                        { required: true, message: '请选择合作企业', trigger: 'blur' }
                    ],
                    nickname:[
                        {required: true, message: '请输入用户名', trigger: 'change'  }
                    ],
                    password :[
                        {required: true, message: '请输入用户密码', trigger: 'change'  }
                    ],
                    roleKey :[
                        {required: true, message: '请选择伙伴权限', trigger: 'change'  }
                    ],
                    userType :[
                        {required: true, message: '请选择合作伙伴', trigger: 'change'  }
                    ]
                },
                information: {
                    id:'',
                    account:'',
                    belongUserId:'',
                    nickname:'',
                    password:'',
                    roleKey:'',
                    userType:''
                },
                userType:'',
                userArr:'',
                num: 0,
                messageList: []
            }
        },
        components: {
            'table-list':() => import('../common/my-table')
        },
        watch:{
     
        },
        mounted(){
            this.getMessage()
            setInterval( () => {
                this.getMessage()
            }, 120000)
            this.getUserList()
        },
        methods:{
            getMessage() {
                let url = CONSTANT.URL.CALENDAR.MESSAGELIST;
                common.requestAjax(url, {}, {}, (data) => {
                    if(data.status == 200) {
                        this.messageList = data.data.bussData;
                        this.showMarquee(this.num)
                    }
                })
            },
            returnPrice(num){
                return common.returnNum(num)
            },
            getList() {
                this.$refs.tableList.getList()
            },
            handleClickSearch() {
                this.$refs.tableList.getList()
            },
            editShow(obj){
                console.log(obj)
                this.titleName = '编辑用户'
                this.information = {
                    id:obj.id,
                    account:obj.account,
                    belongUserId:obj.belongUserId,
                    nickname:obj.nickname,
                    password:'',
                    roleKey:obj.roleKey,
                    userType:obj.userType,
                }
                this.userType = obj.userType;
                this.getUserList()
                this.dialogFormVisible = true
            },
            handleClickAdd(){
                this.titleName = '添加用户'
                this.information = {
                        id:'',
                        account:'',
                        belongUserId:'',
                        nickname:'',
                        password:'',
                        roleKey:'',
                        userType:''
                    }
                this.dialogFormVisible = true
            },
            submitBtn(formName) {
                this.$refs[formName].validate((valid) => {
                if (valid) {
                    let url = CONSTANT.URL.COMPANY.SAVEUSERSUBCORE;
                    let param = JSON.stringify(this.information);
                    common.requestAjax(url, param, null, res => {
                        if(res.status == 200) {
                            this.$message({
                                type: 'success',
                                message: '保存成功!'
                            });
                            this.dialogFormVisible = false;
                            this.information={
                                id:'',
                                account:'',
                                belongUserId:'',
                                nickname:'',
                                password:'',
                                roleKey:'',
                                userType:''
                            }
                           this.$refs.tableList.getList()
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.msg
                            });
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
                });
            },
            getUserList(){
                let  url = CONSTANT.URL.COMPANY.USERTYPE,
                    data = {userType:this.userType?this.userType:null},
                    dataForm = {}
                    common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                    if(res.status == 200){
                        this.userArr= res.data.bussData
                    }else{
                    
                    }
                })
            },
            userTypeChange(e){
                this.userType = e;
                this.information.belongUserId = ''
                this.configList.param.belongUserId = ''
               this.getUserList()
            },
            showMarquee:function (num) {
                if (!this.messageList[0]) return
                this.messageList.push(this.messageList[0]);
                var max = this.messageList.length;
                var that = this;
                let marqueetimer =  setInterval(function(){
                    num++;
                    if(num>=max ){
                        num=0;
                    }
                    that.num=num*30;
                }, 2000);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .message {
        display: block;
        position: relative;
        width: 60%;
        height: 30px;/*关键样式*/
        overflow: hidden;
    }
    .marquee_list{
        display: block;
        position: absolute;
        top:0;
        left: 0;
    }
    .marquee_top{transition: top 0.5s ;}/*关键样式*/
    .marquee_list li{
        height: 30px;/*关键样式*/
        line-height: 30px;/*关键样式*/
        font-size: 14px;
        padding-left: 20px;
        background-color: #fff;
        a {
            color: #333;
        }
    }
    .container {
        &.user-container{
            .el-input,.el-select{
                width: 60%;
            }
        }
        .mb30 {
            margin-bottom: 30px;
        }
        .user {
            header {
                margin: 19px 0;
                font-size: 14px;
                color: #333;
                a {
                    color: #999;
                }
            }
            .focus-pointer {
                font-size: 14px;
                height: 70px;
                line-height: 70px;
                background-color: #fff;
                padding-left: 18px;
                white-space: nowrap;
            }

            .search-modal {
                background: #fff;
                padding: 20px 0 25px 18px;
                .btns {
                    width: 73px;
                    height: 40px;
                    text-align: center;
                    line-height: 40px;
                    color: #fff;
                    font-size: 14px;
                    border-radius: 4px;
                    background-color: #ED7018;
                    display: inline-block;
                    cursor: pointer;
                    &:hover{
                     background-color: #ED9000;
                     transition:all .2s linear
                    }
                }
                .btn-search {
                    margin: 0 20px 0 24px;
                }
                .search-item {
                    width: 25%;
                    display: inline-block;
                    /*margin-right: 2.56%;*/
                    &:last-child {
                        margin-right: 0;
                    }
                    .search-title {
                        display: inline-block;
                    }
                    .el-input {
                        display: inline-block;
                    }
                    .el-select {
                        width: 54%;
                    }
                }
            }
        }
    }
</style>
